<template id="selectmap">
    <div class="selectmap" id="containert"></div>
</template>

<script>
    export default {
        name: 'selectmap',
        props: {
            mapLng: {
                type: Number,
                default: 114.304692
            },
            mapLat: {
                type: Number,
                default: 30.59331
            },
            mapAddress: {
                type: String,
                default: ''
            }
        },
        // props: ['srcType'],
        data() {
            return {
                // mapLng:114.304692,
                // mapLat:30.59331,
                // mapAddress:'湖北省武汉市',
                markersArray:[],
                searchService:'',
            }
        },
        created() {
            let that = this;
            // setTimeout(()=>{
            //     this.init()
            // },500)
        },
        methods: {
            init() {
                var that=this;
                // console.log('234',that.mapLat)
                var map = new qq.maps.Map(document.getElementById("containert"),{
                    center: new qq.maps.LatLng(that.mapLat?that.mapLat:30.59331, that.mapLng?that.mapLng:114.304692),
                    zoom: 13
                });
                // console.log('345',map)
                var marker=new qq.maps.Marker({
                    position:new qq.maps.LatLng(that.mapLat?that.mapLat:30.59331, that.mapLng?that.mapLng:114.304692),
                    draggable: true,
                    map:map
                });
                qq.maps.event.addListener(marker, 'dragend', function(event) {
                    console.log(event)//搜索后的坐标
                    var mapLat=event.latLng.lat;
                    var mapLng=event.latLng.lng;
                    // console.log('搜索后的坐标')
                    that.$api.get('channel/shop/map', {
                        "lat": that.mapLat,
                        "lng": that.mapLng,
                    }, res => {
                        if (res.status == 0) {
                            var mapAddress=res.result.address;
                            that.$emit('clickmap',mapAddress,mapLat,mapLng)
                        } else {
                            // console.log(res.message);
                        }
                    });
                    // $('#latLng').val(event.latLng);
                });
                that.$set(that.markersArray, 0, marker);
                qq.maps.event.addListener(map, 'click', function(event) {
                    that.deleteOverlays()
                    var clickMarker=new qq.maps.Marker({
                        position:event.latLng,
                        draggable: true,
                        map:map
                    });
                    that.$set(that.markersArray, 1, clickMarker);
                    console.log(event)
                    // alert(event.latLng)//点击后的坐标
                    var mapLat=event.latLng.lat;
                    var mapLng=event.latLng.lng;
                    that.$api.get('channel/shop/map', {
                        "lat": mapLat,
                        "lng": mapLng,
                    }, res => {
                        if (res.status == 0) {
                            var mapAddress=res.result.address;
                            that.$emit('clickmap',mapAddress,mapLat,mapLng)
                        } else {
                            // console.log(res.message);
                        }
                    });
                    qq.maps.event.addListener(clickMarker, 'dragend', function(event) {
                        // alert(event.latLng)//拖拽后的坐标
                        var mapLat=event.latLng.lat;
                        var mapLng=event.latLng.lng;
                        that.$api.get('channel/shop/map', {
                            "lat": mapLat,
                            "lng": mapLng,
                        }, res => {
                            if (res.status == 0) {
                                var mapAddress=res.result.address;
                                that.$emit('clickmap',mapAddress,mapLat,mapLng)
                            } else {
                                // console.log(res.message);
                            }
                        });
                        // $('#latLng').val(event.latLng);
                    });
                });
                var latlngBounds = new qq.maps.LatLngBounds();
                //查询poi类信息
                var searchService = new qq.maps.SearchService({
                  location: "北京",
                  pageIndex: 1,
                  pageCapacity: 1,
                  autoExtend: true,
                    complete : function(results){
                        var pois = results.detail.pois;
                        for(var i = 0,l = pois.length;i < l; i++){
                            var poi = pois[i];
                            latlngBounds.extend(poi.latLng);
                            var marker = new qq.maps.Marker({
                                map:map,
                                draggable: true,
                                position: poi.latLng
                            });
                            marker.setTitle(i+1);
                            that.$set(that.markersArray, 2, marker);
                        }
                        map.fitBounds(latlngBounds);
                        var mapLat=results.detail.pois[0].latLng.lat;
                        var mapLng=results.detail.pois[0].latLng.lng;
                        that.$api.get('channel/shop/map', {
                            "lat": mapLat,
                            "lng": mapLng,
                        }, res => {
                            if (res.status == 0) {
                                var mapAddress=res.result.address;
                                that.$emit('clickmap',mapAddress,mapLat,mapLng)
                            } else {
                                // console.log(res.message);
                            }
                        });
                        qq.maps.event.addListener(marker, 'dragend', function(event) {
                            //  alert(event.latLng)//拖拽后的坐标
                            var mapLat=event.latLng.lat;
                            var mapLng=event.latLng.lng;
                            that.$api.get('channel/shop/map', {
                                "lat": mapLat,
                                "lng": mapLng,
                            }, res => {
                                if (res.status == 0) {
                                    var mapAddress=res.result.address;
                                    that.$emit('clickmap',mapAddress,mapLat,mapLng)
                                } else {
                                    // console.log(res.message);
                                }
                            });
                        });

                    }
                });
                this.searchService =searchService
            },
            deleteOverlays() {
                if (this.markersArray) {
                    for (let i in this.markersArray) {
                        this.markersArray[i].setMap(null);
                    }
                    this.markersArray.length = 0;
                }
            },
            searchKeyword() {
                this.deleteOverlays()
                // var keyword = document.getElementById("keyword").value;
                this.searchService.setPageCapacity(1);   //设置每页返回的结果数量。
                this.searchService.search(this.mapAddress);                 //开始查询
            }
        }
    }
</script>

<style lang="scss">
        #containert {
            width: 800px;
            height: 350px;
        }
</style>